<template>
  <div class="person">
    <h1>情况二：监视【ref】定义的【对象类型】数据</h1>
    <h2>姓名： {{person.name}}</h2>
    <h2>年龄： {{person.age}}</h2>
    <button @click="changeName">修改姓名</button>
    <button @click="changeAge">修改年龄</button>
    <button @click="changePerson">修改Person</button>
  </div>

</template>

<script setup lang="ts" name="Person">
 import {ref,watch} from 'vue'
 let person = ref({
   name: 'zhangsan',
   age:18
 })
 // 方法
 function changeName () {
   person.value.name += '~'
 }
 function changeAge () {
   person.value.age += 1
 }
 function changePerson () {
   person.value = {name:'Jeff',age:25}
 }
 //监视 情况一：监视【ref】定义的【对象类型】数据，监视对象地址值，如果想监视对象内部属性的变化，需要开启深度监视
 // watch的第一个参数是：被监视的数据
 // watch的第二个参数是：监视的回调
 // watch的第三个参数是：配置对象（deep、immediate等等.....）
 watch(person,(newValue,oldValue)=>{
   console.log('person发生变化',newValue,oldValue)
 },{deep: true})


</script>
<style scoped>

.person {
  background-color: skyblue;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}

button {
  margin: 0 5px;
}

li {
  font-size: 20px;
}
</style>